<template>
  <div>
    <div class="promote-table-header">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="编号">
          <el-input v-model="searchForm.id"></el-input>
        </el-form-item>
        <el-form-item label="摇号区域">
          <el-select v-model="searchForm.region">
            <el-option label="A" value="A"></el-option>
            <el-option label="B" value="B"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-input v-model="searchForm.activeName"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="btn-group">
            <el-button type="primary" @click="onSubmit" icon="el-icon-search"
              >搜索</el-button
            >
            <el-button type="primary" @click="addItem" icon="el-icon-plus"
              >添加</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog
      title="信息添加"
      :visible.sync="add_dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-card>
        <div slot="header">基本信息</div>
        <el-form
          class="udForm"
          ref="form"
          :model="currentItem"
          label-width="6rem"
        > 
          <el-form-item label="选择区域">
            <el-select v-model="currentItem.region" placeholder="placeholder">
              <el-option :label="item" :value="item" v-for="item in selectRegion" :key="item">{{item}}</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开始摇号">
            <el-date-picker
              v-model="currentItem.startDrawDateTiem"
              type="datetime"
              placeholder="datetime"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="结束摇号">
            <el-date-picker
              v-model="currentItem.endDrawDateTiem"
              type="datetime"
              placeholder="datetime"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="开始选车位">
            <el-date-picker
              v-model="currentItem.startChooseDateTime"
              type="datetime"
              placeholder="datetime"
            ></el-date-picker>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card>
        <div slot="header">车位选择</div>
        <div class="choose-tags">
          <div
            v-for="(item, index) in selectedParkingRegion"
            :class="'tag-'+selectedParkingRegion[index].state"
            @click="pick(index)"
            :key="item.code"
          >
            {{ item.code }}
          </div>
        </div>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="信息修改"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-card>
        <div slot="header">基本信息</div>
        <el-form
          class="udForm"
          ref="form"
          :model="currentItem"
          label-width="6rem"
        >
          <el-form-item label="开始摇号">
            <el-date-picker
              v-model="currentItem.startDrawDateTiem"
              type="datetime"
              placeholder="datetime"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="结束摇号">
            <el-date-picker
              v-model="currentItem.endDrawDateTiem"
              type="datetime"
              placeholder="datetime"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="开始选车位">
            <el-date-picker
              v-model="currentItem.startChooseDateTime"
              type="datetime"
              placeholder="datetime"
            ></el-date-picker>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card>
        <div slot="header">车位选择</div>
        <div class="choose-tags">
          <div
            v-for="(item, index) in selectedParkingRegion"
            :class="'tag-'+selectedParkingRegion[index].state"
            @click="pick(index)"
            :key="item.code"
          >
            {{ item.code }}
          </div>
        </div>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-table
      :data="tableData"
      style="width: 90%"
      @row-dblclick="selectRow"
      class="abc"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="编号"> </el-table-column>
      <el-table-column prop="region" label="活动区域"> </el-table-column>
      <el-table-column prop="startDate" label="开始日期"> </el-table-column>
      <el-table-column prop="startTime" label="开始时间"> </el-table-column>
      <el-table-column prop="endDate" label="结束日期"> </el-table-column>
      <el-table-column prop="endTime" label="结束时间"> </el-table-column>
      <el-table-column prop="count" label="车位总计"> </el-table-column>
      <el-table-column></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  computed: {
    //在选择了房产的情况下选择区域
    selectRegion(){
      let res = []
      if (this.allParking.length == 1) {
        let t = this.allParking[0].parking_space
        for(let i of t){
          res.push(i.region)
        }
    
      }else{
     
      }
      return res
    },
    //在选择了区域和房产的情况下选择车位
    selectedParkingRegion: {
      get: function () {
        //对于房地产企业而言
        if (this.allParking.length == 1) {
          let t = this.allParking[0].parking_space;
          for (let i = 0; i < t.length; i++) {
            if (this.currentItem.region == t[i].region) {
              return t[i].parkingBase;
            }
          }
          return [];
        }
      },
      set: function (index) {
        if (this.allParking.length == 1) {
          let t = this.allParking[0].parking_space;
          for (let i = 0; i < t.length; i++) {
            if (this.currentItem.region == t[i].region) {
              if (t[i].parkingBase[index].state == "saled") return;
              console.log(t[i].parkingBase[index]);
              t[i].parkingBase[index].state =
                t[i].parkingBase[index].state == "selected"
                  ? "empty"
                  : "selected";
              return;
            }
          }
        }
      },
    },
  },
  data() {
    return {
      //通过房产Id获得的区域
      //要添加的表单

      //通过网络请求获取这家房产的全部车位，以区域为主键
      allParking: [
        {
          property: "绿城物业",
          parking_space: [
            {
              region: "A",
              parkingBase: [
                {
                  code: "A001",
                  state: "saled",
                },
                {
                  code: "A002",
                  state: "selected",
                },
                {
                  code: "A003",
                  state: "empty",
                },
                {
                  code: "A004",
                  state: "saled",
                },
                {
                  code: "A005",
                  state: "selected",
                },
                {
                  code: "A006",
                  state: "empty",
                },
                {
                  code: "A007",
                  state: "saled",
                },
                {
                  code: "A008",
                  state: "selected",
                },
                {
                  code: "A009",
                  state: "empty",
                },
                {
                  code: "A010",
                  state: "saled",
                },
                {
                  code: "A011",
                  state: "selected",
                },
                {
                  code: "A012",
                  state: "empty",
                },
              ],
            },
          ],
        },
      ],
                //修改---弹出框
          dialogVisible: false,

          //添加--弹出框
          add_dialogVisible: false,

          //双击-->修改currentItem->绑定到弹出框的内容
          currentItem: {
            region: "A",
            startDrawDateTiem: "",
            endDrawDateTiem: "",
            startChooseDateTime: "",
          },

          showDEBtn: false,
          searchForm: {
            id: "",
            region: "",
            activeName: "",
          },
          tableData: [
            {
              id: "01",
              region: "A",
              count: 100,
              startDate: "2021-7-8",
              startTime: "9:00",
              endDate: "2021-9-13",
              endTime: "9:00",
              activeName: "买一送一",
            },
            {
              id: "02",
              region: "A",
              count: 100,
              startDate: "2021-7-8",
              startTime: "9:00",
              endDate: "2021-9-13",
              endTime: "9:00",
              activeName: "买一送一",
            },
          ],
    };
  },
  methods: {
    addItem() {
      // this.add_dialogVisible = true;
      this.$router.push('lucky-draw-add')
    },
    onSubmit() {},
    handleClose() {},
    edit() {
      this.showDEBtn = !this.showDEBtn;
    },
    selectRow(row, column, event) {
      this.dialogVisible = !this.dialogVisible;
    },
    pick(code) {
      this.selectedParkingRegion = code;
    },

  },
};
</script>

<style scoped>
.active {
  background-color: red;
}
.el-table--enable-row-hover .el-table__body tr:hover {
  background: rgb(184, 224, 250);
  border: 1px solid #313463;
}
.el-table tbody tr:hover > td {
  background-color: #ecf5ff !important;
}
.promote-table-header {
  width: 90%;
  display: flex;
  background-color: #eee;
  padding-top: 1rem;
  border-radius: 10px 10px 0px 0px;
  position: relative;
}
.promote-table-header .el-form {
  display: flex;
  width: 100%;
}
.promote-table-header .el-form-item {
  flex: 1;
  flex-shrink: 1;
  text-align: center;
}
.promote-table-header .el-form-item:last-child .el-input {
  min-width: 100px;
}

.btn-group {
  display: flex;
}

.btn-group .el-button {
  display: block;
  position: static;
}

/* 弹窗样式 */
.udForm .el-form-item {
  width: fit-content;
  margin: 1rem auto;
}
.choose-tags {
  white-space: auto;
}

.tag-saled,
.tag-empty,
.tag-selected {
  border: 1px solid;
  display: inline-block;
  padding: 5px;
  margin: 1rem;
  text-align: center;
}
.tag-saled {
  color: #ccc;
}
.tag-empty {
  color: black;
}
.tag-selected {
  color: cornflowerblue;
}
</style>